import Button from '@/component/button/Button'
import { jieliuUtil } from '@/util/util'
import { ChangeEventHandler, FC, HTMLInputTypeAttribute, memo, useEffect, useRef, useState } from 'react'
import './Input.less'
type TInput = {
  label?: string
  value?: string
  button?: string
  placeholder?: string
  change?: Function
  prop?: string
  type?: HTMLInputTypeAttribute
}
const Input: FC<TInput> = ({ label, value = '', button, placeholder = '', change, type = 'text', prop }) => {
  const input = useRef<HTMLInputElement>(null)
  useEffect(() => {
    input.current!.value = value
  }, [])
  const changeEvent: ChangeEventHandler<HTMLInputElement> = e => {
    const value = e.currentTarget.value
    jieliuUtil(() => {
      change && change(value)
    }, 200)
  }
  return (
    <div className="input">
      {label && <label htmlFor={prop}>{label}:</label>}
      <input type={type} ref={input} id={prop} placeholder={placeholder} onChange={changeEvent} />
      {button && (
        <div className="button">
          <Button size="small">{button}</Button>
        </div>
      )}
    </div>
  )
}
export default Input
